<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>昨日留的综合练习-1</title>
    <style>
        #d1{
            /*外边距溢出 */
            /*内层元素与外层元素的上外边框重叠, 给内层元素设置外边距,会带着父元素一起移动*/
            /* 第一种解决方案: 给外层父元素添加border线 */
            /*border: 1px solid black;*/
            /* 第二种解决方案: 溢出隐藏 */
            overflow: hidden;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #d1>div{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin-left: 50px;
            margin-top: 50px;
        }
        #d2{
            /*第一种解决方案,随着内边距和边框线的变化自身的宽高*/
            /*width: 51px;*/
            /*height: 91px;*/
            /*第二种解决方案 */
            /*默认情况下盒子模型计算方式: content-box */
            /*如果改成 border-box 元素的宽度将包含:内容 + 内边距 + 边框 不包含外边距*/
            width: 200px;
            height: 200px;
            /*改变盒子模型的计算方式*/
            box-sizing: border-box;
            border: 5px solid green;
            margin-left: 200px;
            padding-left: 50px;
            padding-top: 50px;
        }
    </style>
</head>
<body>
<div id="d1">
    <div></div>
</div>
<div id="d2">哈喽</div>

</body>
</html>